<template>
  <view>
    <view class="search-barCon">
      <view class="input-box">
        <input
          class="input"
          type="text"
          placeholder="搜索"
          @input="inputBeginEdit"
          @focus="getFocus"
          @blur="dismissFocus"
        >
        <icon class="search-icon" type="search" size="14px" />
      </view>
      <view class="input-button">取消</view>
    </view>
    <view v-if="approvalList.length > 0" class="content-list">
      <view
        v-for="(item, idx) in approvalList"
        :key="idx"
        class="content-list-item"
        @click="itemClick(current, idx, item)"
      >
        <view class="content-item-icon">
          <view class="content-item-iconView">{{ item.userName }}</view>
        </view>

        <view class="content-item-view">
          <view class="content-item-info">
            <view class="content-item-topView">
              <view
                class="content-item-title"
              >{{ item.userName }}{{ "的" + item.approName }}</view>
              <view
                class="content-item-status"
                :style="{
                  color:
                    current === 0
                      ? getStatusStyleColor(item.nodeApproverStatu)
                      : getStatusStyleColor(item.approStatu),
                  border:
                    current === 0
                      ? getStatusStyleBorder(item.nodeApproverStatu)
                      : getStatusStyleBorder(item.approStatu)
                }"
              >{{
                current === 0
                  ? getStatusTitle(item.nodeApproverStatu)
                  : getStatusTitle(item.approStatu)
              }}</view>
            </view>
            <!-- 审批各种类型区分 -->

            <view
              class="content-item-type first"
            >{{ "【审批类型】" }}{{ item.approGroupName }}</view>

            <view
              class="content-item-type"
            >{{ "【开始时间】"
            }}{{ item.nodeCreate | fullTime(item.nodeCreate) }}</view>
            <view
              class="content-item-type"
            >{{ "【审批备注】"
            }}{{ item.remark != null ? item.remark : "--" }}</view>
          </view>

          <view class="content-item-time">{{
            item.approCreate | formatDate(item.approCreate)
          }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatDate, fullTime } from "@/utils/tools.js";
import uniLoadMore from "./more-refersh/uni-load-more.vue";
import { listUserApprovedByMeReq } from "@/services/approval";
export default {
  filters: {
    fullTime: fullTime,
    formatDate: formatDate
  },
  components: {
    uniLoadMore
  },
  data() {
    return {
      userName: "",
      seen: true,
      inputValue: "",
      pageparams: {
        pageNo: 1,
        pageSize: 20
      },
      approvalList: []
    };
  },
  computed: {
    getStatusResult() {
      return function(item) {
        return this.getStatus(item);
      };
    }
  },
  created() {
    this.getInitApprovallist();
    this.userName = uni.getStorageSync("name");
  },
  methods: {
    // new
    getInitApprovallist() {
      listUserApprovedByMeReq({ ...this.pageparams }).then(res => {
        this.approvalList = res.entities;
      });
    },
    // old
    inputBeginEdit: function(event) {
      this.inputValue = event.target.value;
    },
    getFocus: function() {
      this.seen = false;
    },
    dismissFocus: function() {
      this.seen = true;
    },
    itemClick: function(item) {
      // eslint-disable-next-line no-undef
      uni.navigateTo({
        url:
          "/approval/applyDetail?userApproId=" +
          item.id +
          "&item=" +
          encodeURIComponent(JSON.stringify(item)) +
          "&type=" +
          "createdByme"
      });
    },
    getStatusStyleColor(status) {
      if (status === 0) {
        return "rgba(252, 175, 79, 1)";
      } else if (status === 1) {
        return "rgba(252, 175, 79, 1)";
      } else if (status === 2) {
        return "rgba(13, 182, 172, 1)";
      } else if (status === 3) {
        return "rgba(250, 80, 81, 1)";
      } else if (status === 4) {
        return "rgba(192, 192, 192, 1)";
      }
      return "rgba(192, 192, 192, 1)";
    },
    getStatusStyleBorder(status) {
      if (status === 0) {
        return "1px solid rgba(252, 175, 79, 1)";
      } else if (status === 1) {
        return "1px solid rgba(252, 175, 79, 1)";
      } else if (status === 2) {
        return "1px solid rgba(13, 182, 172, 1)";
      } else if (status === 3) {
        return "1px solid rgba(250, 80, 81, 1)";
      } else if (status === 4) {
        return "1px solid rgba(192,192,192,1);";
      }
      return "1px solid rgba(192, 192, 192, 1)";
    },
    getStatus: function(item) {
      if (item.status === 0) {
        return "content-item-status";
      } else if (item.status === 1) {
        return "content-item-status shenpizhong";
      } else if (item.status === 2) {
        return "content-item-status tongguo";
      } else if (item.status === 3) {
        return "content-item-status chexiao";
      } else if (item.status === 4) {
        return "content-item-status bohui";
      }
      return "content-item-status";
    },
    getApprovalType: function(groupName) {
      if (groupName === 0) {
        return "待审批";
      } else if (status === 1) {
        return "审批中";
      } else if (status === 2) {
        return "已通过";
      } else if (status === 3) {
        return "已驳回";
      } else if (status === 4) {
        return "已撤回";
      } else if (status === 5) {
        return "其他人通过";
      }
      return "其他人驳回";
    },
    getStatusTitle: function(status) {
      // 0:待审批1:审批中2:通过3:驳回4:撤回5:其他人驳回
      if (status === 0) {
        return "待审批";
      } else if (status === 1) {
        return "审批中";
      } else if (status === 2) {
        return "已通过";
      } else if (status === 3) {
        return "已驳回";
      } else if (status === 4) {
        return "已撤回";
      } else if (status === 5) {
        return "其他人通过";
      }
      return "其他人驳回";
    },
    getContent(item) {
      // approName
      const obj = {
        请假: {
          请假类型: "leavetype",
          开始时间: "creatime",
          结束时间: "overtime"
        },
        外出: {
          外出事由: "outreason",
          开始时间: "creatime",
          结束时间: "overtime"
        },
        补卡申请: {
          异常状态: "states",
          补卡理由: "reason",
          补卡时间: "punchTime"
        },
        工作交接: {
          交接内容: "content",
          开始时间: "creatime",
          结束时间: "overtime"
        },
        加班: {
          加班事由: "reason",
          开始时间: "creatime",
          结束时间: "overtime"
        }, // 人事管理
        入职审批: {
          入职日期: "content",
          转正日期: "creatime",
          职位: "overtime"
        },
        转正: {
          入职日期: "content",
          转正日期: "creatime",
          职位: "overtime"
        },
        调岗申请: {
          转入部门: "content",
          转出部门: "creatime",
          生效日期: "overtime"
        },
        离职申请: {
          申请离职日期: "content",
          预计离职日期: "creatime",
          所在部门: "overtime"
        }, // 行政管理
        物品领用: {
          物品用途: "content",
          物品名称: "creatime",
          领用时间: "creatime"
        },
        通用审批: {
          审批类型: "content", // 审批类型或者审批内容
          审批详情: "creatime",
          申请时间: "creatime"
        }, // 财务管理
        报销: {
          报销类型: "content",
          费用类型: "creatime",
          费用金额: "creatime"
        },
        采购: {
          物品用途: "content",
          物品名称: "thingname",
          领用时间: "creatime"
        },
        付款申请: {
          付款事由: "reason",
          付款方式: "payway",
          付款金额: "payaccount"
        }
      };
      var approContent = "";
      for (var i in obj) {
        if (i === item.flowName) {
          var contentlist = Object.keys(obj[i]);
          contentlist.forEach(content => {
            var approItem =
              `<div
                  class="content-item-type"
                >【` +
              content +
              `】` +
              item[obj[i][content]] +
              `</div>`;
            approContent += approItem;
          });
        }
      }
      return approContent;
    }
  }
};
</script>
